<template>
  <div class="list">
    <div class="title">
      <span>待办事项</span
      ><span class="user" type="info" @click="changeuse">切换账号</span>
    </div>
    <div class="addinfo">
      <input v-model="addinfo" type="text" />
      <button @click="addmatterNow">添加</button>
    </div>
    <div class="infolist">
      <ul>
        <li v-for="item in list" :key="item._id">
          <span :class="item.state ? 'over' : ''">{{ item.matter }}</span>
          <van-button
            @click="updatematterNow(item._id)"
            v-show="!item.state"
            type="info"
            >未完成</van-button
          >
          <van-button v-show="item.state" type="info">已完成</van-button>
          <van-button type="danger" @click="delmatterNow(item._id)"
            >删除</van-button
          >
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { getmatter, addmatter, delmatter, updatematter } from "./service";
import { Dialog } from "vant";
export default {
  data() {
    return {
      list: [],
      addinfo: "",
    };
  },
  methods: {
    changeuse() {
      localStorage.clear();
      this.$router.push("/user");
    },
    async getmatterNow() {
      const obj = { token: this.token, uid: this.id };
      const { data } = await getmatter(obj);
      console.log(data);
      if (data.err) return false;
      this.list = data.list;
    },
    async addmatterNow() {
      const obj = { token: this.token, uid: this.id, matter: this.addinfo };
      const { data } = await addmatter(obj);
      Dialog({ message: data.msg });
      this.getmatterNow();
      this.addinfo = "";
    },
    async delmatterNow(id) {
      const obj = { token: this.token, _id: id };
      const { data } = await delmatter(obj);
      Dialog({ message: data.msg });
      this.getmatterNow();
    },
    async updatematterNow(id) {
      const obj = { token: this.token, _id: id };
      const { data } = await updatematter(obj);
      Dialog({ message: data.msg });
      this.getmatterNow();
    },
  },
  mounted() {
    const res = JSON.parse(localStorage.getItem("lgc"));
    if (!res) {
      this.$router.push("/user");
      return false;
    }
    const { token, _id } = res;
    this.token = token;
    this.id = _id;
    this.getmatterNow();
  },
};
</script>
<style lang="less" scoped>
.list {
  width: 800px;
  height: 1000px;
  margin: 0 auto;
  .title {
    position: relative;
    width: 600px;
    height: 30px;
    font-size: 20px;
    text-align: center;
    line-height: 30px;
    .user {
      position: absolute;
      left: 0;
      font-size: 12px;
      color: gray;
      top: 0;
    }
  }
  .infolist {
    ul {
      li {
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 20px;
      }
    }
  }

  .over {
    color: red;
    text-decoration: line-through;
  }
}
</style>
